<template>
	<div class="Index">
		<!-- 头部 -->
		<Header :navActive="0" ref="Header" @loginStatus='getLoginStatus'/>
		<!-- 内容区域 -->
		<div class="main w1200 cl">
			<!-- 搜索框 -->
			<div class="searchBox">
				<div class="search">
					<div class="inputBox fl"><input type="text" v-model="searchVal" autocomplete="off" placeholder="请输入职位名称或企业名称"/></div>
					<el-button type="primary" class="btn fr" @click="search">找工作</el-button>
				</div>
				<div class="hot">
					<div class="label">热搜职位：</div>
					<router-link :to="{name:'Job',query:{search:item.title}}" class="item" v-for="(item,index) in hot" :key="index">{{item.title}}</router-link>
				</div>
			</div>
			<!-- 菜单和banner -->
			<div class="menuBanner cl">
				<div class="menu fl">
					<ul class="menuNav">
						<li class="menuItem" v-for="(item,index) in menuList" :key="index">
							<div class="liTitle">{{item.name}}</div>
							<div class="liSub">
								<div class="subTitle">{{item.name}}</div>
								<ul class="subList">
									<router-link class="subItem" :to="{name:'Job',query:{search:x.name}}" v-for="(x,y) in item.children" :key="y">{{x.name}}</router-link>
								</ul>
							</div>
						</li>
						<li class="menuItem">
							<div class="liTitle"><router-link :to="{name:'Job'}">全部职类</router-link></div>
						</li>
					</ul>
				</div>
				<div class="banner fl">
					<el-carousel trigger="click" height="420px" :interval='5000'>
						<el-carousel-item v-for="(item,index) in banner" :key="index">
							<template v-if="item.redirect">
								<a :href="item.redirect" :target="item.open?'_blank':''"><img :src="item.image_dictText"></a>
							</template>
							<template v-else>
								<img :src="item.image_dictText">
							</template>
						</el-carousel-item>
					</el-carousel>
				</div>
				<div class="userInfo">
					<!--暂时只显示为招聘公告，后期显示登录用户把4改为1-->
                    <template v-if="loginStatus==4">
						<div class="info">
							<div class="item">
								<el-avatar :size="68" :src="userInfo.photoId_dictText"></el-avatar>
								<div class="name">{{userInfo.name}}</div>
								<div class="other">
									<span>{{userInfo.age}}岁</span>
									<span>{{userInfo.eduLevel}}</span>
									<span>{{userInfo.workYears}}年</span>
								</div>
							</div>
						</div>
						<div class="status">
							<router-link :to="{name:'PersonSendStatus',query:{active:0}}" class="item">
								<div class="num">{{userEnter.deliveryNum}}</div>
								<div class="title">已投递</div>
							</router-link>
							<router-link :to="{name:'PersonSendStatus',query:{active:1}}" class="item">
								<div class="num">{{userEnter.interviewNum}}</div>
								<div class="title">待面试</div>
							</router-link>
							<router-link :to="{name:'PersonSendStatus',query:{active:2}}" class="item">
								<div class="num">{{userEnter.entryNum}}</div>
								<div class="title">邀入职</div>
							</router-link>
						</div>
<!--						<el-button type="primary" class="uploadBtn" @click="UploadResume">上传简历</el-button>-->
						<div class="enter">
							<router-link :to="{name:'PersonResume'}" class="item">
								<img src="../assets/userEnter-icon1.png">
								<p>在线简历</p>
							</router-link>
                            <!--                            <div class="item" @click="LookEnclosure">-->
                            <!--                                                                <img src="../assets/userEnter-icon2.png">-->
                            <!--                                                                <p>附件简历</p>-->
                            <!--                            </div>-->
                            <router-link :to="{name:'PersonSendStatus',query:{active:3}}" class="item">
								<img src="../assets/userEnter-icon3.png">
								<p>我的收藏</p>
							</router-link>
						</div>
					</template>
					<template v-else>
						<div class="gonggao">
							<div class="bigTitle">招聘公告 <router-link :to="{name:'News'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
							<div class="list">
								<router-link class="item" :to="{name:'NewsDetails',query:{id:item.id}}" target="_blank" v-for="(item,index) in gonggaoList" :key="index">
									<div class="title">{{item.title}}</div>
									<div class="date">{{item.publishTime}}</div>
								</router-link>
							</div>
						</div>
					</template>
				</div>
			</div>
			<!-- 企业专场 -->
			<div class="block block1 cl">
				<div class="bigTitle">企业专场 <router-link :to="{name:'Special'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
				<div class="list">
					<router-link :to="{name:'SpecialIndexJob',query:{id:item.sourceId}}" target="_blank" class="item" v-for="(item,index) in specialList" :key="index">
                        <div class="img"><img :src="item.image_dictText"></div>
                        <div class="text">
                            <p>名称：{{item.title}}</p>
                            <p>时间：{{item.startTime}} - {{item.endTime}}</p>
                            <div class="state state0" v-if="item.state==0">待开始</div>
                            <div class="state state1" v-if="item.state==1">进行中</div>
                            <div class="state state2" v-if="item.state==2">已结束</div>
                        </div>
                    </router-link>
				</div>
			</div>
			<!-- 热门企业 -->
			<div class="block block2 cl">
				<div class="bigTitle">热门企业</div>
				<div class="list">
					<router-link :to="{name:'Company',query:{id:item.sourceId}}" target="_blank" class="item" v-for="(item,index) in entList" :key="index">
						<div class="logo"><img :src="item.image_dictText"></div>
						<div class="name">{{item.name}}</div>
						<div class="type">{{item.enTrade_dictText}}</div>
						<!-- <div class="job">
							<div class="jItem fl">
								<div class="val">{{item.socialRecruitment}}</div>
								<p>社招职位</p>
							</div>
							<div class="jItem fr">
								<div class="val">{{item.campusRecruitment}}</div>
								<p>校招职位</p>
							</div>
						</div> -->
					</router-link>
				</div>
			</div>
			<!-- 推荐职位 -->
			<div class="block block3 cl">
				<div class="bigTitle">热门职位 <router-link :to="{name:'Job'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
				<div class="list">
					<router-link :to="{name:'JobDetails',query:{id:item.sourceId}}" target="_blank" class="item" v-for="(item,index) in jobsList" :key="index">
						<div class="info">
							<div class="name">{{item.name}}</div>
							<div class="money">{{item.salary === '0.0K-0.0K' ? '薪资面议' : item.salary}}</div>
							<div class="dsc">
								<span>{{item.jobCity_dictText}}</span>
								<span>{{item.eduLevel_dictText}}</span>
								<span>{{item.workExperience}}</span>
								<span>{{item.needCount}}</span>
							</div>
							<div class="company">
								<div class="text">
									<div class="logo"><img :src="item.logo_dictText"></div>
									<div class="right">
										<div class="companyName">{{item.companyName}}</div>
										<div class="companyOther">
											<span>{{item.enNature}}</span>
											<span v-if="item.enPersonnel_dictText">{{item.enPersonnel_dictText}}</span>
										</div>
									</div>
								</div>
								<div class="fu">
									<span v-for="(x,y) in item.companyBenefits" :key="y">{{x}}</span>
								</div>
							</div>
						</div>
					</router-link>
				</div>
			</div>
			<!-- 动态资讯 -->
			<div class="block block4 cl">
				<div class="bigTitle">动态/资讯 <router-link :to="{name:'News'}" class="more">更多<i class="el-icon-arrow-right"></i></router-link></div>
				<div class="list">
					<router-link class="item" :to="{name:'NewsDetails',query:{id:item.sourceId}}" target="_blank" v-for="(item,index) in newsList" :key="index">
						<div class="img"><img :src="item.thumb_dictText"></div>
						<div class="title">{{item.title}}</div>
						<div class="date">{{item.publishTime}}</div>
					</router-link>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<Footer />
	</div>
</template>

<script>
import {block, personInfo, personInfoEnterNum, cmsContent_list} from '@/api/api'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

export default {
    //组件注入
    components: {Header, Footer,},
    //存放数据
    data() {
        return {
            loginStatus: localStorage.getItem('loginStatus'),//登录状态
            searchVal: '',//搜索内容
            userInfo: {},//用户信息
            userEnter: {
                deliveryNum: 0,
                    interviewNum:0,
                    entryNum:0
				},//用户信息num
				menuList:[],//职位
				banner:[],//banner
				hot:[],//热门搜索
				gonggaoList:[],
				specialList:[],//企业专场
				entList:[],//热门企业
				jobsList:[],//推荐职位
				newsList:[],
			}
		},
		//接受父组件传递的值
        props:[],
		//监控data中的数据变化
		watch: {
		},
		//方法集合
		methods: {
			//搜索
			search(){
				this.$router.push({name:'Job',query:{search:this.searchVal}})
			},
			//职位选择
			searchTypeChange(value){
				console.log(value);
			},
			//上传简历
            UploadResume(){
                this.$refs.Header.UploadResumeFlag = true
			},
			//接收header的loginStatus
			getLoginStatus(val){
				this.loginStatus = val
			},
			//预览附件简历
            LookEnclosure(){
				let enclosure = JSON.parse(localStorage.getItem('resumeEnclosure'))
                if(enclosure){
                    this.$refs.Header.LookEnclosureFlag = true
                }else{
                    this.$message.error('您还没有附件简历');
                }
			},
			//获取用户信息
			getUserInfo(){
				//有缓存
				if(localStorage.getItem('userInfo')){
					this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
				}else{
					personInfo({
						'id': localStorage.getItem('userId')
					},false).then(res =>{
						if(res.code==200){
							localStorage.setItem('userInfo',JSON.stringify(res.result))
						}
					})
				}
			}
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {
			document.body.scrollTop = 0
			document.documentElement.scrollTop = 0
		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			//判断登陆状态
			if(this.userLoginFlag1()){
				//获取用户信息
				this.getUserInfo()
				//已投递 待面试 邀入职
				personInfoEnterNum({},false).then(res =>{
					if(res.code==200){
						this.userEnter = res.result
					}
				});
			}
			//热门搜索
			block({
				'code':'common_hot_search'
			}).then(res =>{
				if(res.code==200){
					this.hot = res.result.blockData
				}
			});
			//首页banner
			block({
				'code':'index_banner'
			}).then(res =>{
				if(res.code==200){
					const banner = res.result.blockData
          this.banner = banner.slice(0,6)
				}
			});
			//职位查询
            block({
                'code':'b-index-tree-job'
            }).then(res =>{
                if(res.code==200){
                    this.menuList = res.result.children.slice(0,8)
                }
			});
			//企业专场
			block({
				'code':'index_enterprise_zc'
			}).then(res =>{
				if(res.code==200){
					let list = res.result.blockData
					for(let i in list){
						if(list[i].startTime){
							let nowDate = new Date().getTime()
							let itemDate1 = new Date(list[i].startTime).getTime()
							let itemDate2 = new Date(list[i].endTime).getTime()
							if(nowDate>itemDate1&&nowDate<itemDate2){
								list[i].state = 1
							}else if(nowDate>itemDate2){
								list[i].state = 2
							}else{
								list[i].state = 0
							}
							list[i].startTime = list[i].startTime.split(' ')[0].replace(/\-/g,".");
							list[i].endTime = list[i].endTime.split(' ')[0].replace(/\-/g,".");
						}
					}
				//	this.specialList = list.slice(0,3);

					this.specialList =this.$imgResizes(list.slice(0,3),'390x101');
				}
			});
			//热门企业
			block({
				'code':'index_hot_enterprise'
			}).then(res =>{
				if(res.code==200){
					this.entList = res.result.blockData
				}
			});
			//热门职位
			block({
				'code':'index_position'
			}).then(res =>{
				if(res.code==200){
					var list = res.result.blockData
					for(let i in list){
						if(list[i].workExperience=='null年-null年'||list[i].workExperience=='0年-0年'){
							list[i].workExperience = '无经验'
						}else if(list[i].workExperience=='0年-999年'){
							list[i].workExperience = '不限'
						}
					}
					this.jobsList = list.slice(0,6);
				}
			});
			//首页——首页右侧_通知(招聘)公告
      cmsContent_list({
				'channelId':'notice',
        'pageNo': '1',
        'pageSize': '10'
			}).then(res =>{
				if(res.code==200){
					let gonggaoList = res.result.records;
					this.gonggaoList = gonggaoList.slice(0,5);//根据示例显示前5个
				}
			});
			//首页下方_动态资讯
			block({
				'code':'b-index-news'
			}).then(res =>{
				if(res.code==200){
					let newsList=res.result.blockData;
					this.newsList = newsList.slice(0,3)
				}
			});
		}
   };
</script>
<style lang="scss">
	@mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	@mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
	@mixin transition{transition: all .3s;}
	.Index{background: #F6F6F6;
		.main{height: auto;padding-bottom: 145px;position: relative;z-index: 0;
			&:after{content: ""; display: block; height: 0; clear: both; visibility: hidden;}
			/* 搜索 */
			.searchBox{width: 1000px;height: auto;overflow: hidden;margin: 30px auto;
				.search{height: 55px;background: #fff;position: relative;
					.type{float: left;position: relative;z-index: 1;top: 2px;left: 2px;
						.el-cascader{position: relative;}
						.el-input__inner{width: 150px;border: 0;height: 51px;line-height: 51px;font-size: 16px;padding: 0 30px;color: #525252;
							&::-webkit-input-placeholder{color: #525252;}
						}
					}
					.inputBox{width: 825px;position: relative;z-index: 1;top: 2px;
						input{width: 100%;height: 51px;line-height: 51px;font-size: 16px;padding: 0 20px;}
					}
					.btn{width: 175px;height: 55px;line-height: 55px;font-size: 16px;color: #fff;font-weight: bold;text-align: center;@include transition();position: absolute;right: 0;top: 0;z-index: 1;}
					&:before{content: "";width: 100%;height: 100%;border:2px solid #E54437;position: absolute;left: 0;top: 0;z-index: 0;}
					&:after{content: "";width: 1px;height: 18px;background: #eee;position: absolute;left: 165px;top: 19px;}
				}
				.hot{height: auto;overflow: hidden;margin-top: 10px;
					.label{font-size: 14px;color: #999;float: left;line-height: 20px;}
					.item{font-size: 14px;color: #666;float: left;margin-left: 15px;line-height: 20px;
						&:hover{color: #E54437;}
						&:first-of-type{margin-left: 5px;}
					}
				}
			}
			/* 菜单和banner */
			.menuBanner{height: auto;
				.menu{width: 220px;height: 420px;background: #fff;color: #333;position: relative;z-index: 1002;box-shadow: 0px 3px 8px rgba(190, 190, 190, 0.26);
					.menuNav{height: auto;padding: 10px 0;
						.menuItem{
							.liTitle{height: 43px;line-height: 43px;font-size: 16px;color: #333;padding: 0 20px;cursor: pointer;
								a{transition: all 0s;}
							}
							.liSub{display: none;width: 730px;min-height: 420px;padding-bottom: 15px;background: #fff;position: absolute;left: 221px;top: 0;box-shadow: 0px 3px 8px rgba(190, 190, 190, 0.26);
								.subTitle{font-size: 16px;font-weight: bold;padding-bottom: 10px;margin: 15px 20px 0;border-bottom: 1px solid #e6e8ec;}
								.subList{height: auto;overflow: hidden;padding: 15px 24px 0;line-height: 32px;
									.subItem{font-size: 14px;color: #666;display: inline-block;width: 25%;cursor: pointer;@include transition();@include text-ellipsis();
										&:hover{color: #E54437;}
									}
								}
							}
							&:hover{
								.liTitle{background: #E54437;color: #fff;
									a{color: #fff;}
								}
								.liSub{display: block;}
							}
						}

					}
				}
				.banner{width: 720px;height: 420px;margin: 0 10px;
					img{width: 100%;height: 100%;}
				}
				.userInfo{width: 240px;height: 420px;overflow: hidden;background: #fff;padding: 30px 20px;
					.info{height: auto;overflow: hidden;text-align: center;
						.name{font-size: 16px;color: #333;font-weight: bold;margin: 10px auto;}
						.other{text-align: center;
							span{font-size: 12px;color: #999;display: inline-block;padding: 0 15px;position: relative;
								&:after{content: "";width: 1px;height: 11px;background: #eee;position: absolute;right: 0;top: 4px;}
								&:last-child:after{display: none;}
							}
						}
					}
					.status{height: auto;overflow: hidden;text-align: center;border-top: 1px solid #f3f3f3;margin-top: 20px;padding-top: 20px;
						.item{display: inline-block;margin: 0 12px;
							.num{font-size: 22px;color: #333;}
							.title{font-size: 13px;color: #666;}
						}
					}
					.uploadBtn{width: 100%;height: 45px;line-height: 45px;font-size: 14px;color: #fff;border-radius: 0;text-align: center;margin: 20px 0;@include transition()}
					.enter{height: auto;overflow: hidden;text-align: center;margin-top: 10px;
						.item{width: 33%;display: inline-block;overflow: hidden;cursor: pointer;
							img{width: 30px;height: 30px;margin: 0 auto;}
							p{font-size: 12px;color: #666;@include transition()}
							&:hover p{color: #E54437;}
						}
					}
					.gonggao{height: auto;overflow: hidden;
						.bigTitle{height: 26px;line-height: 26px;font-size: 16px;color: #333;font-weight: bold;position: relative;padding-left: 15px;margin-bottom: 20px;
							.more{font-size: 14px;color: #777;float: right;font-weight: normal;
								&:hover{color: #E54437;}
							}
							&:before{content: "";width: 4px;height: 16px;background: #E54437;position: absolute;left: 0;top: 4px;}
						}
						.list{height: auto;overflow: hidden;
							.item{height: auto;overflow: hidden;margin-bottom: 21px;cursor: pointer;display: block;
								.title{line-height: 20px;font-size: 14px;color: #000;font-weight: bold;margin-bottom: 10px;@include text-ellipsis();@include transition();}
								.date{font-size: 14px;color: #999;}
								&:hover{
									.title{color: #E54437;}
								}
							}
						}
					}
				}
			}
			/* block */
			.block{height: auto;overflow: hidden;margin-top: 50px;
				.bigTitle{height: 26px;line-height: 26px;font-size: 20px;color: #333;font-weight: bold;position: relative;padding-left: 20px;margin-bottom: 20px;
					.more{font-size: 14px;color: #777;float: right;font-weight: normal;
						&:hover{color: #E54437;}
					}
					&:before{content: "";width: 6px;height: 20px;background: #E54437;position: absolute;left: 0;top: 3px;}
				}
				&.block1{
					.list{width: 1215px;height: auto;overflow: hidden;
						.item{width: 390px;height: auto;overflow: hidden;float: left;margin: 0 15px 15px 0;cursor: pointer;@include transition();
							.img{width: 390px;height: 101px;
								img{width: 100%;height: 100%;}
							}
							.text{height: auto;overflow: hidden;background: #fff;padding: 20px;position: relative;
								p{font-size: 14px;color: #666;line-height: 30px;@include text-ellipsis();}
								.state{font-size: 14px;position: absolute;right: 20px;bottom: 26px;
									&.state0{color: #E54437;}
									&.state1{color: #1296DD;}
									&.state2{color: #CCC;}
								}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);
								img{opacity: .85;}
							}
						}
					}
				}
				&.block2{overflow: visible;
					.list{width: 1215px;height: auto;
						.item{width: 228px;padding: 20px;overflow: hidden;text-align: center;float: left;margin: 0 15px 15px 0;background: #fff;cursor: pointer;@include transition();
							.logo{width: 188px;height: 81px;margin: 0 auto;
								img{width: 100%;height: 100%;}
							}
							.name{font-size: 16px;color: #333;font-weight: bold;margin-top: 20px;@include text-ellipsis()}
							.type{font-size: 13px;color: #888;line-height: 18px;margin-top: 7px;@include text-ellipsis()}
							.job{height: auto;overflow: hidden;text-align: center;margin-top: 10px;padding-top: 15px;border-top: 1px dashed #f6f6f6;position: relative;
								.jItem{font-size: 14px;padding: 0 5px;
									.val{color: #EC584C;}
									p{color: #666;margin-top: 3px}
								}
								&:before{content: "";width: 1px;height: 30px;background: #f6f6f6;position: absolute;left: 50%;top: 22px;}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);}
						}
					}
				}
				&.block3{overflow: visible;
					.list{width: 1215px;height: auto;
						.item{width: 390px;height: 234px;padding: 25px 20px;overflow: hidden;float: left;margin: 0 15px 15px 0;position: relative;background: #fff;cursor: pointer;@include transition();
							.info{height: auto;overflow: hidden;
								.name{width: 60%;font-size: 16px;color: #333;font-weight: bold;@include text-ellipsis();
									span{display: inline-block;font-size: 13px;color: #fff;background: #E54437;padding: 1px 5px 2px;vertical-align: 1px;font-weight: normal;margin-left: 10px;border-radius: 3px;}
								}
								.money{width: 40%;font-size: 20px;color: #E72618;@include text-ellipsis();position: absolute;right: 20px;top: 25px;text-align: right;}
								.dsc{margin-top: 10px;
									span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
										&:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
										&:first-child{margin: 0;}
										&:last-child:after{display: none;}
									}
								}
								.company{height: auto;overflow: hidden;border-top: 1px solid #f3f3f3;padding-top: 20px;margin-top: 20px;
									.text{height: auto;overflow: hidden;
										.logo{width: 105px;height: 45px;overflow: hidden;float: left;margin-right: 18px;
											img{width: 100%;height: 100%;}
										}
										.right{height: auto;overflow: hidden;
											.companyName{font-size: 14px;color: #666;font-weight: bold;@include text-ellipsis()}
											.companyOther{margin-top: 5px;
												span{font-size: 13px;color: #777;position: relative;padding-right: 12px;margin-left: 12px;
													&:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 3px;}
													&:first-child{margin: 0;}
													&:last-child:after{display: none;}
												}
											}
										}
									}
									.fu{height: 25px;overflow: hidden;margin: 20px 0 15px;
										span{font-size: 12px;color: #74767A;border: 1px solid #eee;padding: 2px 8px 3px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
											&:first-child{margin: 0;}
										}
									}
								}
							}
							&:hover{box-shadow: 5px 5px 20px rgba(0,0,0,.05);transform: translateY(-2px);}
						}
					}
				}
				&.block4{height: 345px;background: #fff;padding: 30px;
					.bigTitle{margin-bottom: 30px;}
					.list{width: 1250px;height: auto;overflow: hidden;
						.item{width: 360px;height: auto;overflow: hidden;cursor: pointer;float: left;margin-right: 30px;
							.img{width: 360px;height: 150px;overflow: hidden;margin-bottom: 20px;
								img{width: 100%;height: 100%;}
							}
							.title{font-size: 16px;color: #000;font-weight: bold;margin-bottom: 10px;@include text-ellipsis();@include transition()}
							.date{font-size: 14px;color: #999;margin-top: 10px;}
							&:hover{
								img{transform: scale(1.05);}
								.title{color: #E54437;}
							}
						}
					}
				}
			}
		}
	}
</style>
